<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 因为在浏览器端，开发时态、运行时态的侧重点不一样：
        // 开发时态： devtime
        //     模块划分越细越好
        //     支持多种模块化标准
        //     不考虑兼容性，怎么方便怎么写
        //     支持 npm 或其他包管理器下载的模块

        // 运行时态： runtime
        //     文件越少越好
        //     文件体积越小越好
        //     代码内容越乱越好（安全性）
        //     所有浏览器都要兼容
        //     能够解决其他运行时的问题，主要是执行效率问题


        // 1. 前端项目变得越来越复杂
            // 过去：
                // 以前前端只是几个 HTML + CSS + JS 文件，代码量少，开发维护简单。

            // 现在：
                // 前端项目已经演变为大型单页应用（SPA），包含状态管理、API 调用、打包编译等，代码量庞大且结构复杂。
                // 需要工程化手段管理项目，提高可维护性，如代码拆分、模块化、自动构建等。
            
                // 工程化的作用：

            //     通过 模块化（如 ES6 Modules）、组件化（如 Vue、React 组件）来拆分代码，提高复用性和可维护性。
            //     通过 打包工具（如 Webpack、Vite）进行优化，提高性能。


            // 2. 提高开发效率
            //     过去：
            //         代码修改后需要手动刷新浏览器查看效果，效率低下。
            //     现在：
            //         代码实时编译、自动刷新、自动补全、代码检查等工具大幅提高了开发效率。
                // 工程化的作用：

                //     自动化构建（Webpack、Vite）：自动打包、编译、压缩代码。
                //     HMR（热更新）：修改代码后自动刷新页面，无需手动重启应用。
                //     Lint 规则（ESLint、Prettier）：自动格式化代码，避免低级错误。
                //     CI/CD 持续集成：自动化部署，减少人工操作。
            // 3. 代码可维护性
            //     过去：
            //         代码都是写在同一个文件中，容易混乱，不利于维护。

            //     现在：
            //         模块化 和 组件化 让代码更清晰，团队协作更高效。

            //     工程化的作用：
            //         组件化开发（Vue、React）：将 UI 拆分为可复用组件，提升代码组织能力。
            //         代码拆分（Code Splitting）：按需加载，提高性能。
            //         状态管理（Vuex、Pinia、Redux）：集中管理应用状态，避免数据混乱。
            // 4. 代码质量控制
            //     过去：
            //         不同开发者的代码风格不一致，容易导致维护困难。

            //     现在：
            //         通过 Lint 工具（如 ESLint）、代码格式化工具（如 Prettier），确保代码风格统一。
            //         单元测试（Jest、Vitest） 和 端到端测试（Cypress） 确保代码逻辑正确。

            //     工程化的作用：
            //         代码检查（ESLint）：避免潜在错误，提升代码质量。
            //         自动格式化（Prettier）：保持代码风格一致，提升团队协作体验。
            //         单元测试、集成测试：确保代码的可靠性，减少线上 Bug。
            // 5. 提高性能优化
            //     过去：
            //         资源加载慢、页面响应慢，用户体验差。
            //     现在：

            //         通过 打包优化、代码拆分、Tree Shaking 等手段，提高前端性能。

            //     工程化的作用：
            //         代码压缩（Minify）：减少文件大小，加快加载速度。
            //         Tree Shaking：去除未使用的代码，优化体积。
            //         按需加载（Lazy Loading）：减少首次加载的资源，提高页面渲染速度。
            //         SSR（服务器端渲染）：加快首屏渲染，提高 SEO 友好度。
    </script>
</html>